import { useState, useRef, useCallback } from "react";


const ItemResult = ({ value,label }) => {
 // const [highlightedWord, setHighlightedWord] = useState<string | null>(null);
  //const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  const processTextForPauses=(text)=>{
      // 使用正则表达式在标点后添加空格以增加停顿
      // 不同标点符号添加不同数量的空格来模拟不同长度的停顿
      const newtext =  text
          .replace(/,/g, ', ')  // 逗号后添加一个空格
          .replace(/\./g, '. ')  // 句号后添加一个空格
          .replace(/\?/g, '? ')  // 问号后添加一个空格
          .replace(/!/g, '! ')   // 感叹号后添加一个空格
          .replace(/;/g, '; ')  // 分号后添加一个空格
      return newtext.split(" ")  // 空格隔开
  }
  const arr =processTextForPauses(label)
  const Rightarr = processTextForPauses(value)
  //都转化为大写，再比较是否相等
  const  caseInsensitiveEquals=(str1, str2)=>{
    if(typeof str1==typeof str2){
    return str1.toLowerCase() === str2.toLowerCase();
    }else{
      return false
    }
 }
 //将"HELLO"转换为"Hello
 const toCapitalize=(str)=>{
    if (!str) return '';
    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}
  // 防抖函数实现
  // const debounce = useCallback((func: Function, wait: number) => {
  //   let timeout: NodeJS.Timeout;
  //   return function executedFunction(...args: any[]) {
  //     const later = () => {
  //       clearTimeout(timeout);
  //       func(...args);
  //     };
  //     clearTimeout(timeout);
  //     timeout = setTimeout(later, wait);
  //   };
  // }, []);


  // const handleWordClick = useCallback((word: string) => {
  //   // 清除之前的定时器
  //   if (timeoutRef.current) {
  //     clearTimeout(timeoutRef.current);
  //   }
    
  //   // 设置高亮单词
  //   setHighlightedWord(word);
    
  //   // 触发发音
  //   debouncedSpeak(word);
    
  //   // 设置800ms后取消高亮
  //   timeoutRef.current = setTimeout(() => {
  //     setHighlightedWord(null);
  //   }, 800);
  // }, [debouncedSpeak]);

  return (
    <div style={{
      fontSize:'1.125rem',
      lineHeight:'1.75rem',
      color:'rgb(76, 175, 80)'
    }}>
      {arr.length > 0 ? (
        arr.map((item:string, index) => (
          <div
            key={index}
            style={{
              marginLeft: '5px',
              backgroundColor: caseInsensitiveEquals(item,Rightarr[index]) ? '' : 'red',
              display: 'inline-block', // 确保背景色只覆盖单词本身
              cursor: 'pointer', // 添加指针样式表明可点击
              // padding: '2px 4px', // 添加一些内边距使背景更明显
              // borderRadius: '3px', // 添加圆角使样式更好看
            }}
            //onClick={() => handleWordClick(item)}
          >
            {toCapitalize(item).trim()}
          </div>
        ))
      ) :<></>}
    </div>
  );
};

export default ItemResult;